<template>
  <div class="comment">

    <div class="text-title">评论</div>

    <div class="comment-box"  v-for="(item,index) in list" :key="index">
      <div class="comment-item" >
        <div class="comment-title " @mouseenter="commentActionIndex=index"
             @mouseleave="commentActionIndex=-1">
             <div class="comment-avatar">
            <a-avatar :src="item.userData.avatar" alt="" v-if="item.userData.avatar"/>
            <div v-else style="width: 30px;height: 30px;line-height: 30px;text-align: center;border-radius: 15px;background-color: #2681f3"> <user-outlined style="color: white"/></div>
          </div>
          <div class="comment-detail">
            <div style="height: 30px;display: flex;justify-content: space-between;align-items: center;padding-right: 10px">
              <div style="flex: 1">
                <span>{{item.userData.realname}}</span>
                <span style="color: #999;margin-left: 10px;font-size: 13px">{{item.diffTime?`${item.diffTime}前`:"刚刚"}}</span>
              </div>
              <div class="gray-icon-color" v-if="commentActionIndex==index&&!item.deleted_at">
                <a-space>
                  <a-tooltip>
                    <template #title>回复</template>
                    <message-outlined @click="addComment(item.id,index)"/>
                  </a-tooltip>
                  <a-tooltip v-if="item.can_delete">
                    <template #title>删除</template>
                    <delete-outlined  @click="deleteComment(item.id)"/>
                  </a-tooltip>
                </a-space>
              </div>
            </div>
            <div v-if="item.deleted_at">
              评论已删除 <span class="ml-5">({{item.deleted_at}})</span>
            </div>
            <div v-else>
              <template v-if="item.comment?.comment_word_arr">
                <span style="font-size: 14px" v-for="(comment_w,cmtIndex) in item.comment.comment_word_arr" :class="comment_w.type=='at'?'atStyle':''"  :key="`${comment_w.type}-${cmtIndex}`"  @click="showUserInfo(comment_w)">
                  {{comment_w.str}}
                </span>
              </template>
              <template v-else>
                {{item.comment.comment_word||"--"}}
              </template>
            </div>
          </div>
        </div>
        <div class="comment-content">
          <template v-if="!item.deleted_at">
           <div v-if="item?.comment?.comment_images.length" class="flex flex-wrap">
             <div v-for="img in item.comment.comment_images" :key="img.url" class="ml-10">
               <a-image
                   :height="60"
                   :width="60"
                   :src="img.url"
               />
             </div>
           </div>
            <div v-if="item.comment.comment_files.length" class="mb-10 mt-10">
              <a-row :gutter="[10,10]" :wrap="true">
                <a-col :span="12" v-for="file in item.comment.comment_files" :key="file.url">
                  <div class="file-item "  @click="downloadFile(file)">
                    <div class="flex-1">
                      <file-outlined style="color: #2681f3" />
                      {{file.name}}
                    </div>
                    <download-outlined />
                  </div>

                </a-col>
              </a-row>
            </div>

            <!--        二级评论-->
            <template class="mt-10">

              <div class="comment-box" v-for="(subItem,subIndex) in item.children" :key="`${subIndex}-${subIndex}`">

                <div class="comment-item" >
                  <div class="comment-title" @mouseenter="subActionIndex=subIndex"
                       @mouseleave="subActionIndex=-1">
                    <div class="comment-avatar">
                      <a-avatar :src="subItem.userData.avatar" alt="" v-if="subItem.userData.avatar"/>
                      <div v-else style="width: 30px;height: 30px;line-height: 30px;text-align: center;border-radius: 15px;background-color: #2681f3"> <user-outlined style="color: white"/></div>
                    </div>
                    <div class="comment-detail">
                      <div style="height: 30px;display: flex;justify-content: space-between;align-items: center;padding-right: 10px">
                        <div style="flex: 1">
                          <span>{{subItem.userData.realname}}</span>
                          <span style="color: #999;margin-left: 10px;font-size: 13px">{{subItem.diffTime?`${subItem.diffTime}前`:"刚刚"}}</span>
                        </div>
                        <div class="gray-icon-color"  v-if="subActionIndex==subIndex&&!subItem.deleted_at">
                          <a-space>
                            <a-tooltip>
                              <template #title>回复</template>
                              <message-outlined @click="addComment(subItem.id,index)"/>
                            </a-tooltip>
                            <a-tooltip v-if="subItem.can_delete">
                              <template #title>删除</template>
                              <delete-outlined  @click="deleteComment(subItem.id)"/>
                            </a-tooltip>
                          </a-space>
                        </div>
                      </div>
                      <div v-if="subItem.deleted_at">
                        评论已删除 <span class="ml-5">({{subItem.deleted_at}})</span>
                      </div>
                      <div v-else>
                        <template v-if="item.comment?.comment_word_arr">
                          <span style="font-size: 14px" v-for="(comment_w,cmtIndex) in item.comment.comment_word_arr" :class="comment_w.type=='at'?'atStyle':''"  :key="`${comment_w.type}-${cmtIndex}`" @click="showUserInfo(comment_w)">{{comment_w.str}}</span>
                        </template>
                        <template v-else>
                          {{item.comment.comment_word||"--"}}
                        </template>
                      </div>
                    </div>
                  </div>
                  <div class="comment-content">

                    <template v-if="!subItem.deleted_at">
                      <div v-if="item?.comment?.comment_images.length" class="flex flex-wrap">
                        <div v-for="img in subItem.comment.comment_images" :key="img.url">
                          <a-image
                              :height="60"
                              :width="60"
                              :src="img.url"
                          />
                        </div>
                      </div>
                      <div v-if="subItem.comment.comment_files.length" class="mb-10 mt-10">
                        <a-row :gutter="[10,10]" :wrap="true">
                          <a-col :span="12" v-for="file in subItem.comment.comment_files" :key="file.url">
                            <div class="file-item "  @click="downloadFile(file)">
                              <div class="flex-1">
                                <file-outlined style="color: #2681f3" />
                                {{file.name}}
                              </div>
                              <download-outlined />
                            </div>

                          </a-col>
                        </a-row>
                      </div>

                    </template>
                    <AddComment id="comment"  :approvalId="id" :pid="pid" v-if="commentIndex==index" @success="successComment"/>
                  </div>

                </div>

              </div>
            </template>

          </template>
          <!--      二级评论里的输入-->
          <AddComment id="comment"  :approvalId="id" :pid="pid" v-if="commentIndex==index" @success="successComment"/>
        </div>

      </div>
    </div>
    <!--      一级评论里的输入-->
    <AddComment :approvalId="id" :pid="0" @success="successComment"/>


<!--    名片-->
    <UserDetail
        @request="$utils.commonRequest"
        :visible="userVisible"
        :uid="userId"
        :coordinateData="coordinateData"
        @cancel="userVisible = false"
    />

  </div>

</template>

<script>
import request from '@/common/utils/request'
import {computed, onMounted} from 'vue'
import {reactive, toRefs,ref} from '@vue/runtime-core'
import {CloseCircleFilled, PaperClipOutlined, PictureOutlined, DeleteOutlined, MessageOutlined, FileOutlined,DownloadOutlined,UserOutlined   } from '@ant-design/icons-vue'
import {message} from 'ant-design-vue'
import _ from "lodash"
import utils from '@/common/utils/utils'
import AddComment from '@/views/Approval/ApprovalDetail/modules/AddComment.vue'
import { UserDetail } from "bl-common-vue3";

export default {

  components: {  DeleteOutlined, MessageOutlined,FileOutlined,DownloadOutlined,AddComment,UserOutlined,UserDetail},
  props:{
    id:{
      type:[String,Number],
      default:0
    },
    list:{
      type:Array,
      default: ()=>([])
    },
    filePreviewUrl:{
      type:String,
      default:""
    },

  },
  setup(props,{emit}) {

    console.log()
    const state = reactive({
      focus_state:false,
      pid:0,
      commentIndex:-1,
      commentActionIndex:-1,
      subActionIndex:-1,
      userId:0,
      coordinateData: {},
      userVisible:false,
    })
    const downloadFile = (file) => {
      window.microApp.forceDispatch(
          {
            type: "previewFile",
            visible: true,
            file,
            filePreviewUrl:props.filePreviewUrl
          }
      );
    };


    const deleteComment = (value) => {
      console.log(value)
      utils.modalConfirm({
        content: `确认删除该评论吗？`,
        onOk: () => {
          request
              .del("/work_approval", "/manage/approval/form/commentApproval", {
                id: value,
              })
              .then((res) => {
                message.success(  "删除成功");
                setTimeout(() => {
                  emit("getDetail")
                }, 1000)
              });
        },
      });
    };

    const addComment = (pid,index) => {
      setTimeout(()=>{
        if ( document.getElementById('comment')){
          document.getElementById('comment').scrollIntoView(false);
          document.getElementById('comment').scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"});
        }
      },100)
      state.pid = pid
      state.commentIndex = index
    }
    const successComment = () => {
      emit("getDetail")
    }

    onMounted(()=>{

    })

    const showUserInfo = (comment_w) => {
      console.log(comment_w,"1111")
      if (comment_w.type!="at"||!comment_w.id) {
        return;
      }
      state.userId = comment_w.id;
      state.coordinateData = window.event;
      setTimeout(() => {
        state.userVisible = true;
      }, 50);
    };


    return {
      ...toRefs(state),
      downloadFile,
      deleteComment,
      addComment,
      successComment,
      showUserInfo,


    }
  }
}
</script>

<style lang="less" scoped>
.comment{

  margin-bottom: 30px;

  .comment-box{

    position: relative;

    .comment-item{

      .comment-title{
        display: flex;
        padding: 10px;
        border-radius: 6px;
        .comment-avatar{
          width: 32px;

        }

        .comment-detail{
          flex: 1;
          margin-left: 8px;
        }

      }
      .comment-title:hover{
        background-color: #EDECEC;
      }

      .comment-content{
        margin-left: 50px;
        margin-top: 10px;
      }

    }

    .comment-actions{
      position: absolute;
      top: 15px;
      right: 10px;
    }

    .file-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #eee;
      background: white;
      padding: 8px  10px;
      border-radius: 5px;
    }
  }

  .gray-icon-color{
    color: #646A73;
  }


}

.atStyle{
  height: 28px;
  line-height: 24px;
  padding: 3px 6px;
  margin-right: 5px;
  background-color: #2681f3;
  border-radius: 15px;
  color: white;
  font-size: 12px !important;
  cursor: pointer;
}



</style>